<template>
    <div>
        <!-- 头 -->
        <div>
            <input type="text" placeholder="请输入内容，点击回车键添加 " class="in" v-model="keyword" @keyup.enter="add">
        </div>
        <!-- 内容 -->
        <div>
            <ul>
                <li v-for="item,index in list" :key="index">
                    <input type="checkbox" v-model="item.checked">
                    <span>{{item.name}}</span>
                </li>
            </ul>
        </div>
        <!-- 尾部 -->
        <div>
            <input type="checkbox" v-model="all">
            <span>已完成{{done}}</span>/
            <span>全部{{this.list.length}}</span>
            <button @click="btn">清楚已完成的任务</button>
        </div>
    </div>
</template>

<script>
export default {
  

    data() {
        return {
            keyword: '',
            list: []
        };
    },

    mounted() {

    },

    methods: {
        add() {
            var obj = { id: Math.random(), name: this.keyword, checked: false }
            this.list.push(obj)
            this.keyword = ''
        },
        btn() {
         this.list= this.list.filter(item => {
                return !item.checked
            })

        }
    },
    computed: {
        all: {
            get() {
                if (this.list.length) {
                    return this.list.every(item => {
                        return item.checked
                    })
                }
            },
            set(val) {

                return this.list.forEach(item => {
                    return item.checked = val
                })

            }
        },
        done() {
            return this.list.filter(item => {
                return item.checked
            }).length
        }

    }
};
</script>

<style lang="scss" scoped>
.in {
    width: 300px;
    height: 30px;
    outline: none;
}

ul {
    list-style: none;
}
</style>